<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    .imgSystem {
      width: 394px;
      height: 349px;
      background-image: url('https://img.xiaohucloud.com/res/100511/2021/05/19/100511-EZcrHY.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .myImg {
      width: 100%;
      height: 100%;
    }


    .imgSystem p {
      color: #fff;
      text-align: center;
    }

    .imgSystem li {
      /* float: left; */
      width: 50%;
      /* height: 50%; */
      box-sizing: border-box;
      margin-top: 96px;
    }

    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    .list{
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <div class="imgSystem">
    <!-- <img class="myImg" src="https://img.xiaohucloud.com/res/100511/2021/05/07/100511-WOzYYh.png" alt=""> -->
    <ul class="clearfix list">
      <li>
        <p>OMS</p>
        <p>订单管理系统</p>
      </li>
      <li class="sec">
        <p>TMS</p>
        <p>运输管理系统</p>
      </li>
      <li class="third">
        <p>WMS</p>
        <p>仓储管理系统</p>
      </li>
      <li class="for">
        <p>CRM</p>
        <p>客户关系管理</p>
      </li>
    </ul>
  </div>
</body>

</html>